
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/statics/layui/layui.js" charset="UTF-8"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/layui/css/layui.css"/>
    <script src="${pageContext.request.contextPath}/statics/layui/layui.all.js"></script>

</head>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-warm" lay-event="add">新增</button>
    </div>
</script>
<table id="test" lay-filter="test"></table>
<div id="page"></div>

<script>
    layui.config({
        base: '${pageContext.request.contextPath}/statics/tableTreeDj/'
    }).use(['tableTreeDj','jquery','table'], function() {
        const tableTree = layui.tableTreeDj;
        const $ = layui.$;
        const table=layui.table;

        // 与 layui.table 的参数完全一致,内部本来就是把这些参数传递给table模块的
        const objTable = {
            elem: '#test'
            ,url: "${pageContext.request.contextPath}/sysDept/list2"
            ,toolbar:'#toolbarDemo'
            ,cols: [[
                {field:'deptId', title:'部门编号' },
                {field:'deptName', title:'部门名称' },
                {field:'leader', title:'负责人' },
                {field:'phone', title:'联系电话' },
                {field:'email', title:'邮箱' },
            ]]
            ,id:'list'
        }

        // 本组件用到的参数, 组件内部有默认值,与此一致,因此您可以只声明不一致的配置项
        const config = {
            keyId: "deptId" // 当前ID
            , keyPid: "parentId" // 上级ID
            , title: "deptName" // 标题名称字段,此字段td用于绑定单击折叠展开功能
            , indent: ' &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;' // 子级td的缩进.可以是其他字符
            // 图标
            , icon: {
                open: 'layui-icon layui-icon-triangle-d', // 展开时候图标
                close: 'layui-icon layui-icon-triangle-r', // 折叠时候图标
            }
            , showCache: true //是否开启展开折叠缓存,默认不开启.
        };
        // 工具栏事件
        table.on('toolbar(test)', function(obj){
            var id = obj.config.id;
            var checkStatus = table.checkStatus(id);
            var othis = lay(this);
            switch(obj.event){
                case 'add':
                    location.href="${pageContext.request.contextPath}/sysDept/toAdd";
                    break;
            };
        });
        // 渲染
        tableTree.render(objTable, config);

        // 其他一系列操作后.重新渲染表格,此时可以不传递参数.内部记录了上次传入的参数.
        // tableTree.render();

        // 点击搜索按钮后重载数据.此时可以传入where条件.obj参数与官方表格一致.
        // obj = {where:{id: 1}};
        // tableTree.reload(obj);
    });
</script>
</body>
</html>